<template>
  <div id="i-nav">
    <nav class="jcsb items-center">
      <div class="margin-left-xxl text-blue size-x">梵泊酒店管理系统</div>
      <el-menu :default-active="activeIndex" class="el-menu-demo" style="display: inline-block;" mode="horizontal"
        @select="handleSelect">
        <el-menu-item index="1">首页</el-menu-item>
        <el-menu-item index="2">房间列表</el-menu-item>
        <el-menu-item index="3">酒店服务</el-menu-item>
        <el-menu-item index="4">周边推荐</el-menu-item>
      </el-menu>
      <div>
        <div class="w150p text-center size-m text-gray" @click="dialogVisible=true">{{user_info.user_name}}</div>
      </div>
    </nav>
    <el-dialog :title="is_login?'你好，'+user_info.user_name:'登录·注册'" :visible.sync="dialogVisible" width="350px">
      <div v-if="!is_login" class="text-center">
        <span class="margin-l size-l padding-l" v-for="(item,index) in login_nav" :key="index"
          :class="[index==login_set?'login-set text-orange':'']" @click="login_set=index">{{item}}</span>
      </div>
      <div v-if="is_login" class="text-center">
        <span class="margin-l size-l padding-l" v-for="(item,index) in login_nav2" :key="index"
          :class="[index==login_set?'login-set text-orange':'']" @click="login_set=index">{{item}}</span>
      </div>
      <div v-if="!is_login">
        <div class="margin-top-xl" v-if="login_set==0">
          <el-form ref="form" :model="login_dict" label-width="80px">
            <el-form-item label="用户名:">
              <el-input v-model="login_dict.user_name" style="width: 200px;"></el-input>
            </el-form-item>
            <el-form-item label="密码:">
              <el-input v-model="login_dict.password" style="width: 200px;"></el-input>
            </el-form-item>
          </el-form>
          <div class="text-center">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="login()">登 录</el-button>
          </div>
        </div>
        <div class="margin-top-xl" v-if="login_set==1">
          <el-form ref="form" :model="login_dict" label-width="80px">
            <el-form-item label="用户名:">
              <el-input v-model="login_dict.user_name" style="width: 200px;"></el-input>
            </el-form-item>
            <el-form-item label="密码:">
              <el-input v-model="login_dict.password" style="width: 200px;"></el-input>
            </el-form-item>
            <el-form-item label="手机号:">
              <el-input v-model="login_dict.phone" style="width: 200px;"></el-input>
            </el-form-item>
            <el-form-item label="邮箱:">
              <el-input v-model="login_dict.email" style="width: 200px;"></el-input>
            </el-form-item>
          </el-form>
          <div class="text-center">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="regist()">注 册</el-button>
          </div>
        </div>
      </div>
      <div v-if="is_login">
        <div class="margin-top-xl" v-if="login_set==0">
          <el-form ref="form" :model="login_dict" label-width="80px">
            <el-form-item label="用户名:">
              {{user_info.user_name}}
            </el-form-item>
            <el-form-item label="角色:">
              {{user_info.role}}
            </el-form-item>
            <el-form-item label="手机号:">
              {{user_info.phone}}
            </el-form-item>
            <el-form-item label="邮箱:">
              {{user_info.email}}
            </el-form-item>
          </el-form>
          <div class="text-center">
            <el-button type="primary" @click="quit()">退出登录</el-button>
          </div>
        </div>
        <div class="margin-top-xl" v-if="login_set==1">
          <el-form ref="form" :model="change_password" label-width="80px">
            <el-form-item label="用户名:">
              {{change_password.user_name}}
            </el-form-item>
            <el-form-item label="旧密码:">
              <el-input v-model="change_password.password" style="width: 200px;"></el-input>
            </el-form-item>
            <el-form-item label="新密码:">
              <el-input v-model="change_password.phone" style="width: 200px;"></el-input>
            </el-form-item>
          </el-form>
          <div class="text-center">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="change_password_fun()">修 改</el-button>
          </div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  export default {
    name: 'i-nav',
    data() {
      return {
        activeIndex: this.key_index,
        dialogVisible: false,
        is_login: false,
        login_nav: ["登录", "注册"],
        login_nav2: ["用户信息", "修改密码"],
        login_set: 0,
        login_dict: {
          user_name: '',
          password: "",
          phone: "",
          email: ""
        },
        user_info: {
          "user_name": "登录·注册",
          "role": "",
          "phone": "",
          "email": ""
        },
        change_password: {
          user_name: '',
          password: "",
          old_password: ""
        }
      }
    },
    props: {
      "key_index": {
        type: String,
        default: "1"
      }
    },
    mounted() {
      this.me()
    },
    methods: {
      //登录
      login() {
        this.axios_ex('/api/user/login', this.login_dict, "POST")
      },
      // 退出
      regist() {
        this.axios_ex('/api/user/regist', this.login_dict, "POST")
      },
      // 获取个人信息
      me() {
        this.axios_ex('/api/user/user_info', {}, "GET")
      },
      // 修改密码
      change_password_fun() {
        let that = this
        let request_url = this.getAjaxUrl() + '/api/change_password'
        let ajax_dict = {
          method: "PATCH",
          url: request_url,
          params: this.change_password,
          withCredentials: true,
        }
        axios(ajax_dict)
          .then(function(res) {
            that.$message({
              message: '修改成功',
              type: 'success'
            });
            console.log(res);
          })
          .catch(function(error) {
            // alert('请求错误')
            console.log(error);
          });
      },
      // 退出
      quit() {
        this.axios_ex('/api/user/logout', {}, "DELETE")
      },
      // axios 请求
      axios_ex(url, up_data, method, sd) {
        //alert('进入登录请求')
        let that = this;
        let request_url = this.getAjaxUrl() + url;
        // let request_url = 'https://v2ce.sankuanedu.com' + url;
        let ajax_dict = {}
        if (method == 'GET') {
          ajax_dict = {
            method: method,
            url: request_url,
            params: up_data,
            withCredentials: true,
          }
        } else {
          ajax_dict = {
            method: method,
            url: request_url,
            data: up_data,
            withCredentials: true,
          }
        }
        axios(ajax_dict)
          .then(function(res) {
            switch (url) {
              case '/api/user/login':
                if (res.status == 200) {
                  that.me()
                  that.dialogVisible = false
                  that.$message({
                    message: '登录成功',
                    type: 'success'
                  });
                }
                break;
              case '/api/user/regist':
                if (res.status == 200) {
                  that.me()
                  that.dialogVisible = false
                  that.$message({
                    message: '注册成功',
                    type: 'success'
                  });
                }
                break;
              case '/api/user/user_info':
                if (res.status == 200) {
                  that.is_login = true
                  that.user_info = that.set_user_info(res.data.infos[0])
                  that.change_password.user_name = that.user_info.user_name
                }
                break;
              case '/api/user/logout':
                if (res.status == 200) {
                  that.is_login = false
                  that.user_info = that.set_user_info({
                    "user_name": "登录·注册",
                    "role": "",
                    "phone": "",
                    "email": ""
                  })
                  that.$message({
                    message: '退出成功',
                    type: 'success'
                  });
                }
                break;
            }
          })
          .catch(function(error) {
            // alert('请求错误')
            console.log(error);
            that.$message({
              message: error,
              type: 'error'
            });
          });
      },
      // 选择导航
      handleSelect(key, keyPath) {
        this.$emit('update:key_index', key)
        switch (key) {
          case "1":
            this.$router.push({
              path: '/'
            })
            break;
          case "2":
            this.$router.push({
              path: '/room'
            })
            break;
          case "3":
            this.$router.push({
              path: '/server'
            })
            break;
          case "4":
            this.$router.push({
              path: '/'
            })
            break;
        }
      },

    }
  }
</script>

<style>
  #app {}

  header {
    min-width: 1440px;
  }

  main {
    width: 1100px;
    margin: 0 auto;
    margin-top: 1rem;
  }

  .reco {
    width: 300px;
  }

  .news {
    margin-left: 1rem;
    width: 100%;
  }

  .login-set {
    border-bottom: #f37b1d 1px solid;
  }
</style>
